<template>
  <div id="transaction">
    <div class="homeTitle">资产交易申请</div>
    <div class="applybox">
      <div class="applydetail" v-for="(item, index) in apply" :key="index" :style="{background:colors[index]}" @click="goapply(index)">
        <p style="margin-top: 16px">发起</p>
        <p>{{item}}</p>
      </div>
    </div>
     <!-- 表格 -->
    <div class="table">
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="city" label="申请地市"  align="center"></el-table-column>
          <el-table-column prop="bank" label="申请机构\行社" align="center"></el-table-column>
          <el-table-column prop="model" label="资产交易类型" align="center"></el-table-column>
          <el-table-column prop="counterparty" label="交易对手" align="center"></el-table-column>
          <el-table-column prop="address" label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" type='text' @click="handleClick(scope.row)">办理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="totalPage">
        </el-pagination>
      </div>
    </div>
 
  </div>
</template>

<script>
export default {
  name: 'transaction',
  data () {
    return {
      apply: ['债券交易申请', '债券回购交易申请', '同业拆借交易申请','同业存单交易申请','存放同业交易申请','债券借贷申请','理财产品交易申请'],
      colors: ['#6DD1BD','#52A1CC','#475699','#574E6D','#A93D5D','#E2647C','#F9AFA6'],
      tableData: [],
      // 分页
      currentPage: 1,
      totalPage: 0,
    };
  },
  methods: {
    
    goapply (index) {
      if(index == 0) {
        this.$router.push('accountDetail');
      }
      if(index == 1) {
        this.$router.push('zqhgApply');
      }
      if(index == 2) {
        this.$router.push('interbankApply')
      }
      if(index == 3) {
        this.$router.push('ncdApply')
      }
      if(index == 4) {
        this.$router.push('nostroApply')
      }
      if(index == 5) {
        this.$router.push('zqjdApply')
      }
      if(index == 6) {
        this.$router.push('licaiApply')
      }
    },
     // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getList()
    },
    handleClick(row) {
      sessionStorage.setItem('storageId', row.id)
         switch(row.model) {
        case '理财产品交易': 
            this.$router.push('licaiapply')
              break;
        case '债券交易': 
            this.$router.push('accountDetail')
             break;
        case '同业拆借交易': 
              this.$router.push('interbankApply')
             break;
        case '存放同业交易': 
             this.$router.push('nostroApply')
             break;
        case '债券回购交易': 
             this.$router.push('zqhgApply')
             break;
        case '同业存单交易': 
             this.$router.push('ncdApply')
             break;
        case '债券借贷交易': 
             this.$router.push('zqjdApply')
             break;     
        default: break;
      }
    },
    getList() {
      let param = {
        page: this.currentPage,
        limit: 10
      }
      this.axios.get('applyTemporary/findAllByUserId', {params: param}).then(res => {
        this.tableData = res.data.data
        this.totalPage = res.data.pageInfo.total
      })
    }
  },

  mounted() {
    this.getList()
  }
};
</script>

<style lang="scss">
  #transaction {
    .applybox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .applydetail {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 20px;
        padding: 10px 15px;
        background: white;
        color: white;
        width: 10%;
        height: 90px;
        border-radius: 5px;
        line-height: 30px;
        cursor: pointer;
        p {
          text-align: center;
          font-size: 14px;
        }
      }
    }
    // ------表格------
    .table {
      background: white;
      .sTitle {
        margin-top: 20px;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-input {
          width: 400px;
          margin-right: 20px;
        }
      }
      .tablecon {
        padding: 21px;
        padding-left: 0;
      }
      .pgfy {
        padding: 20px;
        padding-top: 10px;
        text-align: right;
      }
    }
  }
</style>

